<template>
    <!-- 随堂练习批阅 -->
    <div id="spractice-watch">
        <div class="preview-top" :class="{'h60':!resData.showAnswer}">
            <div class="preview-top1">
                <div class="preview-top-content" style="position:relative">
                <div v-if="courseTitleData">
                    <span style="display:inline-block; overflow:hidden;" class="preview-title">随堂练习</span>
                    &nbsp;
                    <span style="display:inline-block; overflow:hidden;" class="mr0">{{ courseTitleData.courseName }}</span>
                    <span style="display:inline-block; overflow:hidden;" class="preview-line">/</span>
                    <span :title="courseTitleData.chapterName" class="beyond-hiding" style="display:inline-block;width:550px;">{{ courseTitleData.chapterName }}</span>
                    <!-- 专科版本-->
                    <span class="chapterlists"  @click="detalList"><i class="iconfont icon-liebiao1"></i> &nbsp;章节列表</span>
                </div>
                </div>
            </div>
            <div class="preview-top2 jx-content" v-if="resData">
                <div class="preview-top-content clearfix">
                    <div v-if="isShwoRanking" class="fl top-content">
                        <span>
                            <span style="margin-right:20px;">
                                <i class="iconfont icon-paiming"></i>
                            </span>
                            <span>当前排名：</span>
                            <span class="fontbold fs18">第{{ rank }}名</span>
                            <span @click="getRanking(1)" style="margin:0 80px 0 10px; cursor:pointer;">
                                <i class="iconfont icon-refresh"></i>
                            </span>
                        </span>
                        <span style="color:#727272;">您的得分：</span>
                        <span style="font-size:24px;" class="fontbold">{{ resData.score }}</span>
                        <span class="fontbold">分</span>
                    </div>
                    <div class="fr top-content-right" v-if="resData.showAnswer">
                        <el-tooltip class="item" effect="dark" placement="bottom">
                            <div slot="content">
                                <div style="line-height:30px;">
                                    1、只允许重新作答选择题、判断题、填空题
                                </div>
                                <div style="line-height:30px;">
                                    2、重新作答题目，不列入批阅、统计中，仅用于练习
                                </div>
                            </div>
                            <i style="vertical-align: -1px;" class="iconfont icon-wenti-m c-blue fs18"></i>
                        </el-tooltip>
                        <span>重新作答:</span>
                        <span @click="toWrong(allIds,1)" class="cd-btn">客观题目</span>
                        <span @click="toWrong(wrongIds,2)" class="cd-btn">错题集</span>
                    </div>
                </div>
                <!-- <div class="preview-top-content clearfix" v-show="!resData.showAnswer">
                    <div class="fl top-content">
                        <span style="color:#727272;">您的得分：</span>
                        <span style="font-size:24px;" class="fontbold">{{ resData.score }}</span>
                        <span class="fontbold">分</span>
                    </div>
                </div> -->
            </div>
   
        </div>
        <div class="jx-content preview-content" v-if="resData">
            <div v-for="(item,index) in resData.readingList" :key="index">
                <!-- 题型标题：一、选择题（每题1分，共2题） -->
                <h2 class="tq-title">{{ questionNumber[index] }}、{{ item.typeName }}(共{{ item.questionList.length }}题)</h2>
                <dl v-for="(item2,index2) in item.questionList" :key="index2">
                <dt class="markdown-body">
                    <!-- 题型中序号 1.xxxx -->
                    {{ index2+1 }}、
                    <!-- 题目内容 -->
                    <span v-html="item2.content"></span>
                    <!-- 选择题 单选多选 -->
                    <span v-if="item.type == 1">
                    <!-- {{ item2.isMultipleChoice }} -->
                    <span v-if="!item2.isMultipleChoice">[单选题]</span>
                    <span v-if="item2.isMultipleChoice">[多选题]</span>
                    </span>
                    <!-- 括号 选择题答案映射选项A,B,C -->
                    <div style="display:flex;" class="chose-item"  v-if="item.type === 1">
                        <span style="min-width:70px;">您的回答：</span>
                        <!-- 单选题 -->
                        <span style="display:flex;" v-if="!item2.isMultipleChoice">
                            <!-- 选择题没答 -->
                            <span v-if="!item2.userAnswer && item2.userAnswer !== 0">未填写</span>
                            <span style="min-width:26px;" v-else>{{ qKey[item2.userAnswer] }} 、</span>
                            <span style="display: inline-block;" class="markdown-body" v-html="item2.choiceList[item2.userAnswer]"></span>
                        </span>
                        <!-- 多选题 -->
                        <span v-if="item2.isMultipleChoice">
                            <!-- 选择题没答 -->
                            <span v-if="isChoseNull(item2,index2) || item2.userAnswer == []">未填写</span>
                            <span v-else>
                                <span v-for="(choiceListItem,choiceListIndex) in item2.choiceList" :key="choiceListIndex">
                                    <div style="display:flex;" v-if="item2.userAnswer.includes(choiceListIndex)">
                                        <span style="min-width:26px;">{{ qKey[choiceListIndex] }}、</span>
                                        <span v-html="choiceListItem"></span>
                                    </div>
                                </span>
                            </span>
                        </span>
                        <span  v-if="resData.showAnswer">
                            <span v-if="item2.right">
                                <i class="iconright iconfont icon-zhengque1"></i>
                            </span>
                            <span v-else>
                                <i class="iconwrong iconfont icon-cuowu1"></i>
                            </span>
                        </span>
                    </div>
                    <!-- 括号 判断题答案映射 正确 错误 -->
                    <div class="chose-item" v-else-if="item.type === 2">
                        您的回答：
                        <!-- 判断题没答 -->
                        <span v-if="!item2.userAnswer && item2.userAnswer !== false">未填写</span>
                        <span v-else>{{ judgekey[item2.userAnswer-0] }}</span>
                        <span v-if="resData.showAnswer">
                            <span v-if="item2.right">
                                <i class="iconright iconfont icon-zhengque1"></i>
                            </span>
                            <span v-else>
                                <i class="iconwrong iconfont icon-cuowu1"></i>
                            </span>
                        </span>
                    </div>
                    <!-- 填空要把题型内括号过滤 没过滤==================================================================================================== -->
                    <!-- 括号 填空题 显示括号 -->
                    <!-- 括号 简答 编程 实验 不显示括号 -->
                    <div class="stu-answer" v-else-if="item.type === 3">
                        您的回答：
                        <span v-if="!item2.userAnswer">未填写</span>
                        <span v-else>{{ item2.userAnswer }}</span>
                        <span  v-if="resData.showAnswer">
                            <span v-if="item2.right">
                                <i class="iconright iconfont icon-zhengque1"></i>
                            </span>
                            <span v-else>
                                <i class="iconwrong iconfont icon-cuowu1"></i>
                            </span>
                        </span>
                    </div>
                    <!-- 简答题 -->
                    <div v-else-if="item.type === 4">
                        您的回答：
                        <span v-if="!item2.userAnswer">未填写</span>
                        <span v-else v-html="item2.userAnswerContentHtml"></span>
                    </div>
                    <!-- 其他题 -->
                    <div v-else v-show="item.type !== 6">
                        您的回答：
                        <span v-if="!item2.userAnswer">未填写</span>
                        <span v-else v-html="item2.userAnswer"></span>
                    </div>
                    <!-- 每题分数 -->
                    <!-- ({{ item.score }}分) -->
                    <!-- 正确答案 -->
                    <!-- 选择题正确答案 -->
                    <span style="display:flex;" v-if="!item2.right && item.type === 1">
                        <span class="c-blue" style="min-width:70px;">正确答案：</span>
                        <span style="color:#333;" v-if="item.type === 1">
                            <span v-for="(choiceListItem,choiceListIndex) in item2.choiceList" :key="choiceListIndex">
                                <div style="display:flex;" v-if="item2.rightAnswer.includes(choiceListIndex)">
                                    <span style="max-width:26px;">{{ qKey[choiceListIndex] }}、</span>
                                    <span v-html="choiceListItem"></span>
                                </div>
                            </span>
                        </span>
                    </span>
                    <!-- 非选择题正确答案 附件题没有正确答案 -->
                    <span v-if="!item2.right && item.type !== 1 && item.type !== 7">
                        <span class="c-blue">正确答案：</span>
                        <!-- <span>{{ qKey[item2.rightAnswer] }}、</span> -->
                        <!-- <span class="markdown-body" v-html="item2.choiceList[item2.rightAnswer]"></span> -->
                        <!-- {{ item2 }} -->
                        <!-- <span v-if="item.type === 1">{{ item2.rightAnswer.map(item => qKey[item]).join("") }}</span> -->
                        <!-- 判断题映射 正确 错误 -->
                        <span v-if="item.type === 2">{{ judgekey[item2.rightAnswer-0] }}</span>
                        <span v-else v-html="item2.rightAnswer"></span>
                    </span>
                    <div class="analysis-box" v-if="item2.jxContentHtml">
                        <br />
                        <span class="analysis-title">答案解析：</span>
                        <div class="analysis-content" v-html="item2.jxContentHtml"></div>
                    </div>
                    <!-- 得分input框 -->
                    <!-- <div v-if="item.type > 2" class="c-blue question-score">
                    得分：
                    <el-input @keyup.native="provingCount(item2,'score',item)" v-bind="questionScore" v-model.number="item2.score"></el-input>
                    </div> -->
                </dt>
                </dl>
                <!-- <div v-if="item.type < 3">
                正确{{ item.right }}题，错误{{ item.wrong }}题
                </div> -->
                <div v-if="isShwoRanking" class="question-score">
                    得分：
                    <span v-bind="questionScore">{{ item.totalScore }}</span>分
                </div>
            </div>
            <!-- 二期新增 -->
            <div class="question-assess" v-if="assessTextarea">
                <span class="title">评价 :</span>
                <div>{{ assessTextarea }}</div>
            </div>
        </div>
        <div style="width:1200px; margin:0 auto; position:relative">
            <div class="detailBox blocks">
                <div class="chapterList-top">
                    <p class="fl">章节列表</p>
                    <div class="fr"><i class="iconfont icon-Group-" @click="deleteFns"></i></div>
                </div>
                <el-collapse  accordion v-model="activeName" @change="handleChange">
                    <div v-for="(item,index) in appList"  :key="index" >
                        <el-collapse-item v-if="item.levels == 3" :name='index' :disabled = item.locked>
                            <template slot="title">
                                <div :class="item.locked? 'collapsTitle2' : 'collapsTitle' " >
                                    <i class="iconfont icon-chaibaoguoqujian" v-if="openFlag == String(index) "></i>
                                    <i class="iconfont icon-baoguofahuo" v-else></i>
                                    <span class="collapsTitle_span">单元{{index+1}}&nbsp;{{item.name}}</span>
                                    <i class="iconfont icon-lock"  v-if="item.locked"></i>
                                </div>
                            </template>
                            <div v-for="(items,indexs) in item.children"  :key="indexs" >
                               <div :class="items.locked? 'courseName2' : 'courseName' " >
                                    {{indexs+1}}&nbsp;{{items.name}}&nbsp;
                                    <i class="iconfont icon-diannao-copy" v-if="items.type == 2 || items.type == 3"  style="vertical-align:baseline"></i>
                                    <i class="iconfont icon-tubiaozhizuomoban1"  v-if="items.type == 4"></i>
                                    <i class="iconfont icon-lock"  v-if="items.locked"></i>
                                </div>
                                 <!-- 多加数据为空 -->
                                <div v-if="items.otherInfo.length <=0 ">
                                    <span style="padding-left:28px; color:rgb(66, 66, 66)">暂无数据</span>
                                </div>
                                <div v-else class="detailbox" v-for="(item3,index3) in items.otherInfo"  :key="index3" @click="EnteDetails(item3,item,items)" >
                                     <div v-show="!items.locked">
                                        <div class="infoName" :class="item3.type == 4 && item3.id == chapterId? 'studying':''">
                                            <i class="iconfont icon-42" v-if="!item3.show " style="color:#424242"></i>
                                            <span class="crile" :class="item3.type == 4 && item3.id == chapterId? 'crileBg':''" v-else></span>
                                            <span class="Tiltlefiles" v-if="item3.show">{{item3.name}}</span><i class="iconfont icon-diannao-copy" v-if="item3.experimentCourseFlag && item3.name != '实验学习'"></i>
                                            <span class="Tiltlefiles" v-if="!item3.show " style="color:#424242">{{item3.name}}</span>
                                        </div>
                                        <div class="fr studying" v-if="item3.type == 4 && item3.id == chapterId">正在学<i class="iconfont icon-shijian00"></i></div>
                                     </div>
                                </div>
                            </div>
                        </el-collapse-item>
                        <el-collapse-item  v-if="item.levels == 2" :name='index' :disabled = item.locked>
                            <template slot="title">
                                <div :class="item.locked? 'collapsTitle2' : 'collapsTitle' " >
                                    <i class="iconfont icon-chaibaoguoqujian" v-if="openFlag == String(index) "></i>
                                    <i class="iconfont icon-baoguofahuo" v-else></i>
                                    <span class="collapsTitle_span">章节{{index+1}}&nbsp;{{item.name}}&nbsp;</span>
                                    <i class="iconfont icon-diannao-copy" v-if="item.type == 2 || item.type == 3"  style="vertical-align:baseline"></i>
                                    <i class="iconfont icon-tubiaozhizuomoban1"  v-if="item.type == 4"></i>
                                     <i class="iconfont icon-lock"  v-if="item.locked"></i>
                                </div>
                            </template>
                            <div v-if="item.otherInfo.length > 0">
                                <div class="detailbox" v-for='(item2,index4) in item.otherInfo' :key="index4" @click="EnteDetails(item2,item)" >
                                    <div class="infoName" :class="item2.type == 4 && item2.id == chapterId? 'studying':''">
                                        <i class="iconfont icon-42" v-if="!item2.show " style="color:#424242" ></i>
                                        <span class="crile" :class="item2.type == 4 && item2.id == chapterId? 'crileBg':''" v-else></span>
                                        <span class="Tiltlefiles" v-if="item2.show">{{item2.name}}</span><i class="iconfont icon-diannao-copy" v-if="item2.experimentCourseFlag && item2.name != '实验学习'"></i>
                                        <span class="Tiltlefiles" v-if="!item2.show " style="color:#424242">{{item2.name}}</span>
                                    </div>
                                    <div class="fr studying" v-if="item2.type == 4 && item2.id == chapterId" >正在学<i class="iconfont icon-shijian00"></i></div>
                                </div>
                            </div>
                            <div v-else style="padding-left:25px;">暂无数据</div>
                        </el-collapse-item>
                    </div>
                </el-collapse>
            </div>
        </div>
        <!-- 专科版本弹窗 -->
        <!-- <el-dialog :close-on-click-modal="false" class="dialog-virtual dialogList" title="提示" :visible.sync="dialogVirtual" width="460px">
            <div class="dialog-content">
                <i class="iconfont icon-tishi"></i>
                <p>有其它实验正在进行中，是否停止它进入该实验?</p>
            </div>
            <span slot="footer" class="dialog-footer btnlist">
                <el-button class="button-style" @click="dialogVirtual = false">取 消</el-button>
                <el-button class="button-style" @click="VirtualSave">确 定</el-button>
            </span>
        </el-dialog> -->
    </div>
</template>
<script>
    import axios from "axios";
    import $ from "jquery";
    //导出word
    import "../../../../static/wordExport/jquery.wordexport";
    export default {
        data() {
            return {
                //黑框名称
                courseTitleData: "",
                chapterId: this.$route.query.chapterId,
                courseId: this.$route.query.courseId,
                paramsData: {},
                //接收的题目列表
                resData: "",
                //发送的数据
                //reqData:'',
                //选择题
                questionList1: null,
                //判断题
                questionList2: null,
                //填空题
                questionList3: null,
                //简答题
                questionList4: null,
                //编程题
                questionList5: null,
                qKey: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"],
                judgekey: ["错误", "正确"],
                questionNumber: ["一", "二", "三", "四", "五", "六"],
                questionName: [
                    {
                        type: 1,
                        name: "选择题"
                    },
                    {
                        type: 2,
                        name: "判断题"
                    },
                    {
                        type: 3,
                        name: "填空题"
                    },
                    {
                        type: 4,
                        name: "简答题"
                    },
                    {
                        type: 5,
                        name: "编程题"
                    },
                    {
                        type: 6,
                        name: "实验题"
                    }
                ],
                //专科版本数据
                appList:[],
                roles:'',
                dialogVirtual:false,
                activeName:'',
                openFlag:'',
                clickId:'',
                //是否添加过班级
                userStatus:'',

                // 二期评价
                assessTextarea: '',
                pdfStatus: false,
                //是否显示排名
                isShwoRanking:false,
                //排名
                rank:"",
                //错题集
                wrongIds:[],
                //全部id
                allIds:[],


                singleTask:'',
                classId:''
            };
        },
        computed: {
            //计算除选择判断外其他题得分和总分
            questionScore() {
                let that = this;
                if (that.resData) {
                    //计算总分
                    let readingList = that.resData.readingList;
                    that.resData.score = readingList.map(item => item.totalScore - 0).reduce((total, num) => total + num);
                }
            }
        },
        //专科版本
        created(){
            // 从状态管理获取roles
            this.roles = this.$store.state.user.roles[0]
            this.classId = this.$route.query.myClassId  || this.$route.query.ClassId
            this.DetailData()
            this.ClassInit()
            //yx 添加分辨率判断
            this.$nextTick(()=>{
                if(window.screen.height <= 900){
                    //console.log(window.screen.height,147)
                    $('.blocks').css('max-height','520px')
                    $('.detailBox').css('max-height','520px')

                }
            })
        },
        mounted() {
            this.init();
        },
        methods: {
            //筛选ids
            setWrongIds(arr){
                let that = this;
                let arrWrong = [];
                let arrRes = [];
                arr.forEach(item => {
                    if(item.type <= 3){
                        let questionList = item.questionList;
                        let arrItem = [];
                        let awrong = questionList.filter(item2 => item2.right == false);
                        if(awrong.length){
                            arrItem = awrong.map(item2 => item2.id);
                        }
                        arrWrong = arrWrong.concat(arrItem);
                        console.log(arrItem);
                        console.log(arrWrong,15);
                    }
                });
                
                arr.forEach(item => {
                    if(item.type <= 3){
                        let questionList = item.questionList;
                        let id = questionList.map(item2 => item2.id);
                        arrRes = arrRes.concat(id);
                    }
                });
                console.log(arrWrong,123);
                console.log(arrRes,456);
                that.wrongIds = arrWrong;
                that.allIds = arrRes;
            },
            //重答
            toWrong(ids,qtype){
                
                let that = this;
                if(ids.length == 0){
                    if(qtype === 1){
                        that.$message("暂无题目！只允许重新作答选择题、判断题、填空题");
                    }
                    else{
                        that.$message.success("没有错题，继续加油！");
                    }
                    return;
                }
                let routeData;
                let newWindow = window.open()
                routeData = that.$router.resolve({
                    path: "/SPracticeWrong",
                    query: {
                        courseId: that.courseId,
                        chapterId: that.chapterId,
                        myClassId:that.$route.query.myClassId,
                        ids:ids
                    }
                })
                newWindow.location.href = routeData.href
            },
            //获取排名
            getRanking(refresh){
                console.log(654);
                let self = this;
                let classId = self.$route.query.myClassId 
                let evaluatStatus = self.$route.query.evaluatStatus;
                console.log(classId,evaluatStatus);
                let reRanking = evaluatStatus == "已评价" || evaluatStatus == "已批阅"
                console.log(reRanking,345);
                if(!reRanking){
                    return;
                }
                ///course/{courseId}/student/base-statistics/{ChapterId}/{classId} 
                self.$http.get('/tes/course/'+self.courseId+'/student/base-statistics/' + self.chapterId + "/" + classId)
                .then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.isShwoRanking = true;
                        self.rank = res.data[0].rank;
                        if(refresh){
                            self.$message.success("刷新成功")
                        }
                        console.log(res);
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            //专科版本
            handleChange(val){
                //val 索引
                this.openFlag = val
                let vals = String(val)
                this.openFlag = vals
            },
            //初始化详情列表
            DetailData(){
                let self = this
                self.$http.get('/tes/course/'+self.courseId+'/chapter/list').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.appList = res.data
                        console.log( self.appList,1)
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            //点击关闭
            deleteFns(){
                $('.detailBox').hide()
            },
            //点击详情
            detalList(){
                let self = this
                let IndexValue;
                for(let i =0; i< self.appList.length; i++){
                    if(self.appList[i].chapterIds.includes(Number(self.chapterId))){
                        IndexValue = i
                    }
                }
                // let IndexValue;
                // for(let i =0; i< this.appList.length; i++){
                // 	if(this.appList[i].recentlyStudiedFlag == 1){
                // 		IndexValue = i
                // 		console.log(IndexValue,7878)
                // 	}
                // }
                this.activeName = IndexValue
                //最近学习索引等于打开这项
                this.openFlag = IndexValue
                this.scrollFn(790)
                //判断屏幕分辨率
                if(window.screen.height <= 900){
                    this.scrollFn(540)
                }
                $('.detailBox').stop().slideToggle()
            },
            //自动到最近学习
            scrollFn(n){
                // this.$nextTick(()=>{
                //     $(".detailBox").animate({scrollTop:$('.studying').parent().offset().top},20)
                // })
                this.$nextTick(()=>{
                    let topValue = $('.studying').parent().offset().top
                    if(topValue > n){
                        $(".detailBox").animate({scrollTop:$('.studying').parent().offset().top-100},20)
                    }
                })
            },
            // 是否添加过班级
            ClassInit() {
                let self = this
                self.$http.get('/tes/course/'+self.courseId+'/user-status').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.userStatus = res.data
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            //跳转详情
            EnteDetails(item,itembig,items){
                let self = this
                self.singleTask =  item.chapterId
               //self.stepTypeStr = ''
                if(itembig.levels == 2 ){
                    self.stepType = itembig.stepTypeStr
                }else if( itembig.levels == 3){
                    self.stepType = items.stepTypeStr
                }
                //如果为真，可以跳转
                if(item.show){
                        if(item.name == '理论学习' || item.name == '任务引导'){
                        self.$router.push({
                            path:'/Teaching/MyCourses/CoursewareDetail',
                            query:{
                                courseId: self.courseId,
                                chapterId: item.id,
                                 classId:self.classId,
                                 singleChaper:item.id,
                                 
                            }
                        })
                    }else if(item.name == '教学资源'){
                        self.$router.push({
                            path:'/Teaching/MyCourses/CourseResourceDetail',
                            query:{
                                courseId: self.courseId,
                                chapterId: item.id,
                                 classId:self.classId,
                                 singleChaper:item.id,
                            }
                        })
                    }else if(item.name == '备课材料'){

                        self.$router.push({
                            path:'/Teaching/MyCourses/CourseMaterialDetail',
                            query:{
                                courseId: self.courseId,
                                chapterId: item.id,
                                 classId:self.classId,
                                 singleChaper:item.id,
                            }
                        })
                    }else if(item.name == '实验学习' ||  item.experimentCourseFlag){
                        if(self.userStatus == 'NOT_CREATE_CLASS'){
                            self.$router.push({
                                path:'/Teaching/MyCourses/VirtualMachineManual',
                                query:{
                                    courseId: self.courseId,
                                    chapterId: item.id,
                                    isCourseDetail:true,
                                     singleChaper : item.chapterId,
                                    stepTypeStr: self.stepType,
                                     classId:self.classId
                                }
                            })
                        }else if(self.userStatus == 'EXIST_CLASS'){
                            self.clickId = item.id
                            self.$http.get('/tes/image-allocation/course/'+self.courseId+'/'+item.id).then(response => {
                            let res = response.data
                            if(res.code == '200'){
                                if(res.data.allocated){
                                    if (self.roles == 'TEACHER' || self.roles == 'MARKET_TEACHER' || self.roles == 'UNIVERSITY_TEACHER') {
                                        // 跳转实验页
                                        self.$router.push({
                                            path: "/Teaching/MyCourses/VirtualMachine",
                                            query: {
                                                courseId: self.courseId,
                                                chapterId: item.id,
                                                singleChaper : item.chapterId,
                                                stepTypeStr: self.stepType,
                                                classId: self.classId,
                                            }
                                        })
                                    }else if(self.roles == 'STUDENT'){
                                        // 跳转实验页
                                        self.$router.push({
                                            path: "/Teaching/MyCourses/STVirtualMachine",
                                            query: {
                                                courseId: self.courseId,
                                                chapterId: item.id,
                                                singleChaper : item.chapterId,
                                                stepTypeStr: self.stepType,
                                                classId: self.classId,
                                            }
                                        })
                                    }
                                }else{
                                    self.$router.push({
                                        path: '/Teaching/MyCourses/VirtualMachineManual',
                                        query: {
                                            courseId: self.courseId,
                                            chapterId: item.id,
                                            isCourseDetail:true,
                                             singleChaper : item.chapterId,
                                            stepTypeStr: self.stepType,
                                            classId: self.classId,
                                        }
                                    })
                                }
                            }else{
                                self.$message.error(res.message)
                            }
                        }).catch(err => {
                            console.log(err)
                        })
                        }
                    }else if(item.name == '随堂练习'){
                        //分为学生和老师身份
                        if(self.roles == 'STUDENT'){
                            if(self.userStatus=='NOT_CREATE_CLASS'){
                                self.typesStatus = 1   //没有班级时传1  不显示提交按钮
                            }else{
                                self.typesStatus = 2  //有班级时传2 显示提交按钮
                            }
                            self.$router.push({
                                path: "/Teaching/MyCourses/SPractice",
                                query: {
                                    courseId: self.courseId,
                                    chapterId: item.id,
                                    typesStatus:self.typesStatus,
                                    evaluatStatus:item.evaluatStatus,
                                    singleChaper:item.id,
                                    classId: self.classId,
                                }
                            })
                            //window.location.reload()
                        }else if(self.roles == 'TEACHER' || self.roles == 'MARKET_TEACHER' || self.roles == 'UNIVERSITY_TEACHER'){
                            self.$router.push({
                                path: "TPractice",
                                query: {
                                    courseId: self.courseId,
                                    chapterId: item.id,
                                    singleChaper:item.id,
                                    classId: self.classId,
                                }
                            })
                        }

                    }
                }
            },
            // 确定跳转实验详情
            // VirtualSave(){
            //     let self = this
            //     if(self.roles == 'TEACHER' || self.roles == 'MARKET_TEACHER' || self.roles == 'UNIVERSITY_TEACHER'){
            //         // 跳转实验页
            //             self.$router.push({
            //             path: "/Teaching/MyCourses/VirtualMachine",
            //             query: {
            //                 courseId: self.courseId,
            //                 chapterId: self.clickId,
            //                  stepTypeStr: self.stepType,
            //                 singleChaper : self.singleTask,
            //             }
            //         })
            //     }else if(self.roles == 'STUDENT'){
            //             self.$router.push({
            //             path: "/Teaching/MyCourses/STVirtualMachine",
            //             query: {
            //                 courseId: self.courseId,
            //                 chapterId: self.clickId,
            //                 stepTypeStr: self.stepType,
            //                 singleChaper : self.singleTask,
            //             }
            //         })
            //     }
            //     self.dialogVirtual = false
            // },

            init() {
                this.getCourseTitleData();
                this.getPaper();
                this.getRanking();
            },
            //公共接口，考试名称
            getCourseTitleData() {
                let that = this;
                let paperId = that.$route.query.paperId - 0;
                axios.get("/tes/course/" + that.courseId + "/chapter/" + that.chapterId).then(function(res) {
                    // console.log("成功1");
                    // console.log(res);
                    if (res.status === 200) {
                        if (res.data.code === 200) {
                            // console.log(res.data.data, 666);
                            that.courseTitleData = res.data.data;
                        }
                    }
                }).catch(function(err) {
                    if (err.response) {
                        console.log(err.response);
                    }
                });
            },
            //选择题多选是否填写
            isChoseNull(item2, index2) {
                //是数组
                if (item2.userAnswer instanceof Array) {
                    return !item2.userAnswer.length;
                    console.log(1)
                } else {
                    //不是数组
                    // return item2.userAnswer && item2.userAnswer !== "empty";
                     console.log(10)
                     return true
                }
            },
            //限制input框只能输入正整数 并且不能超出指定分数
            provingCount(item, prop, row) {
                let that = this;
                //限制输入数字
                // console.log(item[prop], 55);
                let reg = /^[0-9]+$/;
                let isInt = reg.test(item[prop]);
                // console.log(isInt, 66);
                if (!isInt) {
                    item[prop] = "";
                    that.$message.warning("只能输入整数");
                }
            },
            //获取试题
            getPaper() {
                var that = this;
                axios.get("/tes/course/" +that.courseId + "/chapter/" + that.chapterId + "/practice").then(function(res) {
                        // console.log("成功");
                        // console.log(res, 110);
                        if (res.status === 200) {
                            if (res.data.code === 200) {
                            //替换填空题括号
                            //填空题替换(+)为（）
                            let fillQuestion = res.data.data.readingList.find(
                                item => item.type === 3
                            );
                            // console.log(fillQuestion, 6666666);
                            if (fillQuestion) {
                                let content = fillQuestion.questionList;
                                $.each(content, function(i, d) {
                                    let str = d.content;
                                    var result = str.replace(/\(\+\)/g, "（）"); //把(+)替换成()
                                    d.content = result;
                                });
                            }
                            that.resData = res.data.data;
                            that.setWrongIds(res.data.data.readingList);
                            that.assessTextarea = res.data.data.checkResult
                            // if(res.data.data){
                            //   let reqData = {};
                            //   let typeScoreList = [];
                            //   res.data.data.readingList.forEach(item => {
                            //     let obj = {
                            //       type:item.type,
                            //       score:0,
                            //     };
                            //     typeScoreList.push(obj);
                            //   });
                            //   reqData.score = 0;
                            //   reqData.typeScoreList = typeScoreList;
                            //   that.reqData = reqData;
                            // }
                            // console.log(that.resData, 666);
                        } else {
                            that.$message({
                                message: res.data.message,
                                type: "error"
                            });
                        }
                    }
                }).catch(function(err) {
                    if (err.response) {
                        console.log(err.response);
                    }
                });
            },
            //提交批阅
            submitMarking() {
                var that = this;
                axios.post("/tes/course/" + that.courseId + "/chapter/" + that.chapterId +"/practice",that.resData).then(function(res) {
                    // console.log("成功");
                    // console.log(res);
                    if (res.status === 200) {
                        if (res.data.code === 200) {
                            that.$message({
                                message: "提交成功",
                                type: "success"
                            });
                        } else {
                            that.$message({
                                message: res.data.message,
                                type: "error"
                            });
                        }
                    }
                }).catch(function(err) {
                    if (err.response) {
                        console.log(err.response);
                    }
                });
            },
            //上一份
            prevMarking() {},
            //下一份
            nextMarking() {}
        }
};
</script>
<style scoped>
    .courseName2{
        position: relative;
    }
   
   
    .courseName2 .icon-lock{
        position: absolute;
        right: -6px;
        top: 3px;
    }
    
    .el-collapse-item__header .collapsTitle2 .icon-lock{
        position: absolute;
        right: 11px;
        top: 3px;
    }
    .blocks::-webkit-scrollbar{
        width: 5px;
        height: 5px;
    }
    .blocks::-webkit-scrollbar-thumb {
        background: #4a4a4a;
        border-radius:50px;
    }
    .blocks{
        overflow-y: scroll;
        max-height: 760px;
    }
    .el-collapse{
        border:none;
    }
    .dialog-virtual>>>.el-dialog__footer{
        text-align: center;
    }
    .el-collapse-item>>>.el-collapse-item__header{
        background: #2d3136;
        color: #fff;
        border-bottom:none;
        text-align: center;
        position: relative;
    }
    .el-collapse-item>>>.el-icon-arrow-right{
        display: none;
    }
    .el-collapse-item>>>.el-collapse-item__content{
        background: #26292c;
        color: #a2a3a4;
        padding: 5px 20px;

    }
    .el-collapse-item__content>div{
        padding: 4px 0;
    }
    .el-collapse-item>>>.el-collapse-item__wrap{
        border-bottom:none;
    }
</style>
<style lang="scss" scoped>
    
    .chapterlists{
        position: absolute;
        right: 0px;
        cursor: pointer;
        color: #bbb;
        &:hover{
            color: #fff;
        }
    }
    //详情盒子
    .detailBox{
        width: 400px;
        position: fixed;
        top: 65px;
        bottom: initial;
        right: 111px;
        background: #26292c;
        max-height: 760px;
        border-radius: 6px;
        display: none;
        z-index: 999;
        .chapterList-top{
            overflow: hidden;
            height: 50px;
            line-height: 50px;
            padding: 0 18px;
            &>p{
                line-height: 50px;
                color: #a2a3a4;
            }
            i{
                color: #a2a3a4;
                &:hover{
                    color: #fff;
                    cursor: pointer;
                }
            }
        }
        .infoName{
            display: inline-block;
             &:hover{
               span{color: #1374e4;}
               .crile{
                    background: #1374e4;
                }
            }
        }
        .icon-diannao-copy{
            font-size: 14px;
            margin-left: 8px;
            color: #1374e4;
            vertical-align:super
        }
        .courseName{
            margin: 5px 0;
            cursor: pointer;
            &:hover{
                color: #fff;

            }
            .icon-tubiaozhizuomoban1{
                color: #1374e4;
                font-size: 16px;
            }
        }
    }
    .collapsTitle{
        text-align: left;
        // margin: 0 auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-left: 22px;
        color: #a2a3a4;
        .collapsTitle_span{
                max-width: 270px;
                display: inline-block;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                line-height: 13px;
            }
            .icon-chaibaoguoqujian{
            color: #a2a3a4;
            font-size: 14px;
            }
            &:hover{
                color: #fff;
                .icon-chaibaoguoqujian{
                        color: #fff;
                }
            }
            .icon-tubiaozhizuomoban1{
                    color: #1374e4;
                    font-size: 16px;
                }
    }


    .collapsTitle2{
        text-align: left;
        // margin: 0 auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-left: 22px;
        color: #a2a3a4;
        .collapsTitle_span{
                max-width: 270px;
                display: inline-block;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                line-height: 13px;
            }
            .icon-chaibaoguoqujian{
            color: #a2a3a4;
            font-size: 14px;
            }
            &:hover{
                color: #fff;
                .icon-chaibaoguoqujian{
                        color: #fff;
                }
            }
            .icon-tubiaozhizuomoban1{
                    color: #1374e4;
                    font-size: 16px;
                }
    }
    .icon-shijian00{
        color: #1374e4;
        margin-left: 5px
    }

    .crile{
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #a2a3a4;
        display: inline-block;
        margin-right: 10px;
        margin-bottom: 9px;

    }
    .studying{
        color: #1374e4;
    }
    .crileBg{
        background: #1374e4;
    }
    .detailbox{
        padding:2px 0 2px 15px;
        cursor: pointer;
        &:hover{
            color: #1374e4;
            .crile{
                background: #1374e4
            }
        }
    }
    .Tiltlefiles{
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        max-width: 300px;
        cursor: pointer;
    }

    .intnet{
        color: #1277eb;
        font-size: 14px;
        display: inline-block;
        vertical-align: 12px;
    }
    .taskName{
        margin-right: 5px;
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        max-width: 300px;
    }
    .icon-42{
        font-size: 12px;
        vertical-align: text-bottom;
        margin-left: -2px;
        margin-right: 5px;
    }
    .dialogList{
        .dialog-content{
            text-align: center;
            i{
                font-size: 50px;
                color: #d6d6d6;
                display: block;
                margin-top: 25px;
            }
            p{
                font-size: 14px;
                text-align: center;
                line-height: 18px;

            }
            .handbook-item{
                text-align: center;
                margin-top: 30px;
            }
        }
        .btnlist{
            .button-style{
                width: 90px;
            }
        }
    }
</style>
<style lang="scss">
    @import "../../../styles/layout/color_variables";
    body {
        background: #f8f8f8;
    }
    #spractice-watch {
        .top-content-right{
            color:#385899;
        }
        .cd-btn{
            color:#385899;
            border:1px solid #385899;
            padding:6px 14px;
            font-size: 14px;
            cursor: pointer;
            margin-left:10px;
            &:hover{
                border-color:#1277eb;
                color:#1277eb;
            }
        }
        .fontbold{
            font-weight: bold;
        }
        .top-content{
            color:#385899;
        }
        .iconright{
            font-size:16px; 
            color:#29a794; 
            margin-left:8px;
        }
        .iconwrong{
            font-size:14px; 
            color:#ff4240; 
            margin-left:8px;
        }
        .correct{
            font-size: 14px;
            color:#1277eb;
            border:1px solid #1277eb;
            padding:0px 2px;
            margin-left:10px;
            cursor: pointer;
        }
        .analysis-box{
            .analysis-title{
                color:#474747;
                font-weight: bold;
            }
            .analysis-content{
                color:#474747;
            }
        }
        //190717
        .stu-answer{
        }
        .markdown-body {
            font-size: 14px !important;
            >p{
                display:inline-block;
            }
        }
        //190717
        img {
            max-width: 100%;
        }
        background: #f8f8f8;
        .underline {
            text-decoration: underline;
        }
        .font16 {
            font-size: 16px;
            line-height: 40px;
        }
        //选择题答案下划线
        .chose-item {
        }
        .question-score {
            color:#1277eb;
            font-weight: bold;
            font-size: 16px;
            .el-input {
                width: auto;
                .el-input__inner {
                    width: 50px;
                }
            }
        }
        .preview-top.h60{
            // height:60px;
        }
        .preview-top {
            position: relative;
            z-index: 2;
            height: 120px;
            margin: 0px auto 0;
            .preview-top1 {
                width: 100%;
                height: 60px;
                line-height: 60px;
                background: #101937;
                position: fixed;
                top: 0;
                color: #fff;
                font-size: 14px;
                .preview-top-content {
                    width: 1200px;
                    margin: 0 auto;
                    span {
                        margin-right: 0px;
                    }
                    .preview-title {
                        font-size: 18px;
                        margin-right: 0;
                    }
                    .preview-line {
                        margin: 0 6px;
                    }
                }
            }
            .preview-top2 {
                margin-top: 0;
                width: 100%;
                line-height: 80px;
                position: fixed;
                top: 60px;
                padding: 0;
                font-size: 14px;
                .preview-top-content {
                    width: 1200px;
                    margin: 0 auto;
                    padding: 0 40px;
                    .button-style {
                        margin-left: 20px;
                    }
                }
                .preview-top-content2 {
                    width: 1200px;
                    margin: 0 auto;
                    line-height: 30px;
                    padding-bottom: 30px;
                }
            }
        }
        .preview-content {
            width: 1200px;
            margin: 40px auto 20px;
            color: $title-gray;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
            p {
                display: inline;
            }
            .tq-title {
                color: $title-gray;
                font-size: 16px;
                line-height: 40px;
            }
            dl {
                padding-left: 20px;
            }
            dt, dd {
                font-size: 14px;
                //190717
                line-height: 24px;
                //190717
            }
            //190717
            dt {
                margin-bottom: 20px;
            }
            //190717
            dd {
                padding-left: 20px;
            }
            .btn-group {
                text-align: center;
                .button-style {
                    margin: 40px 5px;
                }
            }
        }
        .question-assess{
            // overflow: hidden;
            height: 150px;
            margin-top: 20px;
            margin-bottom: 25px;
            .title{
                // float: left;
                width: 4%;
                display: inline-block;
                vertical-align: top;
                font-size: 16px;
                color: #385899;
            }
            div{
                // float: left;
                display: inline-block;
                width: 90%;
                font-size: 16px;
                color: #727272;
            }
        }
    }
</style>
